<script setup>
</script>
<template>
  <div class="header-container">
    <router-link to="/home" custom v-slot="{isActive,navigate}">
      <svg t="1714911872337" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1004" width="20" height="20">
        <path
          d="M716.8 937.472H307.2a157.6448 157.6448 0 0 1-152.7296-120.7296l-83.0976-334.848a159.6416 159.6416 0 0 1 61.44-168.96l288.1024-207.1552a155.904 155.904 0 0 1 182.1696 0L890.88 312.7808a159.6416 159.6416 0 0 1 61.44 168.96l-83.0464 334.8992A157.696 157.696 0 0 1 716.8 937.472zM512 148.1216A84.224 84.224 0 0 0 462.7456 163.84L174.848 370.944a89.6512 89.6512 0 0 0-33.8944 93.696l83.0464 334.8992A86.1184 86.1184 0 0 0 307.2 865.792h409.6a86.1184 86.1184 0 0 0 83.1488-66.2528l83.0464-334.8992a89.6512 89.6512 0 0 0-33.8944-93.696L561.2544 163.84a84.1216 84.1216 0 0 0-49.2544-15.7184z m322.56 660.0192z"
          fill="#cdcdcd" p-id="1005"></path>
        <path d="M330.3936 717.568a35.84 35.84 0 0 1-34.816-27.5968L256 524.2368a35.84 35.84 0 1 1 69.7344-16.5376l39.3728 165.7344a35.84 35.84 0 0 1-26.624 43.1616 35.2768 35.2768 0 0 1-8.0896 0.9728z" fill="#cdcdcd" p-id="1006"></path>
      </svg>
      <div :class="{active:isActive}" @click="navigate">网址收藏</div>
    </router-link>
    <router-link to="/imageGallery" custom v-slot="{isActive,navigate}">
      <svg t="1714912036165" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1445" width="20" height="20">
        <path
          d="M718.8992 938.9056a111.5136 111.5136 0 0 1-39.5264-7.2704l-153.344-58.112a39.5264 39.5264 0 0 0-28.0576 0L344.6272 931.84a111.2576 111.2576 0 0 1-150.528-109.3632l7.8848-163.84a39.5776 39.5776 0 0 0-8.6528-26.6752l-102.7072-128a111.3088 111.3088 0 0 1 57.4976-176.9984l158.2592-43.1616a39.3728 39.3728 0 0 0 22.6816-16.4352l89.9072-137.1648A110.8992 110.8992 0 0 1 512 79.9232a110.8992 110.8992 0 0 1 93.0304 50.2784l89.9072 137.1648a39.3728 39.3728 0 0 0 22.6816 16.4352l158.2592 43.1616a111.3088 111.3088 0 0 1 57.4976 176.9472l-102.7072 128a39.5776 39.5776 0 0 0-8.6528 26.6752l7.8848 163.84a111.36 111.36 0 0 1-111.0016 116.6336zM512 799.2832a111.4112 111.4112 0 0 1 39.424 7.2192l153.6 58.112a39.5776 39.5776 0 0 0 53.5552-38.8608l-7.8848-163.84a110.848 110.848 0 0 1 24.3712-74.9568l102.4-128a39.5264 39.5264 0 0 0-20.48-62.8736l-158.2592-43.1616a111.0528 111.0528 0 0 1-63.7952-46.08L545.0752 169.472a39.5264 39.5264 0 0 0-66.1504 0L389.12 306.6368a111.0528 111.0528 0 0 1-63.7952 46.08l-158.3616 43.4176a39.5264 39.5264 0 0 0-20.48 62.8736l102.656 128a110.848 110.848 0 0 1 24.3712 74.9568l-7.8848 163.84a39.5776 39.5776 0 0 0 53.5552 38.8608l153.3952-58.1632a111.2064 111.2064 0 0 1 39.424-7.2192z"
          fill="#e6e6e6" p-id="1446"></path>
        <path d="M512 699.8016a178.688 178.688 0 0 1-159.3344-97.28 35.84 35.84 0 1 1 63.6416-32.8704 107.52 107.52 0 0 0 191.3344 0 35.84 35.84 0 1 1 63.6928 32.8704 178.7392 178.7392 0 0 1-159.3344 97.28z" fill="#e6e6e6" p-id="1447">
        </path>
      </svg>
      <div :class="{active:isActive}" @click="navigate">图片收藏</div>
    </router-link>
  </div>
</template>
<style lang="scss" scoped>
.header-container {
  display: flex;
  align-items: center;
  background: #1e90ff;
  height: 40px;
  line-height: 40px;
  div {
    padding-left: 10px;
    padding-right: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ccc;
    cursor: pointer;
    &.active {
      color: #fff;
    }
    svg {
      margin-right: 3px;
      fill: #ccc;
    }
    &.active {
      fill: #fff;
    }
  }
}
</style>
